<template>
  <div class="commonMain helpInf">
    <div class="coMain">
      <div>
        <div class="coMainIn">
          <div class="coTitle"><span @click="backToHelp">帮助中心</span>/
            <span class="headline">
              <!-- 如何在微信注册小程序？ -->
              <!-- 教你利用“附近的小程序”抢占先机 -->
              <!-- 如何将小程序账号授权给拍掌柜代理发布？ -->
              {{$route.params.step === '1' ? '如何在微信注册小程序？' : $route.params.step === '2' ? '教你利用“附近的小程序”抢占先机' : $route.params.step === '3' ? '如何将小程序账号授权给拍掌柜代理发布' : ''}}
              
            </span>
          </div>
          <div class="helpForm commonForm">
            <div class="helpTitle">
              <!-- 注册小程序账号 -->
              <!-- 利用“附近的小程序”抢占先机 -->
              <!-- 将小程序账号授权给拍掌柜代理发布 -->
              {{$route.params.step === '1' ? '注册小程序账号' : $route.params.step === '2' ? '利用“附近的小程序”抢占先机' : $route.params.step === '3' ? '将小程序账号授权给拍掌柜代理发布' : ''}}
            </div>
            <div class="answer">
              <div class="answer1" v-show="$route.params.step === '1'">
                <h3>1. 注册：</h3>
                <div>
                  <p>商家需要在微信公众平台官网首页（<span class='helpLink'>https://mp.weixin.qq.com/</span>）点击右上角的“立即注册”按钮；</p>
                  <img src="./images/an1_0.png">
                </div>
                <div>
                  <p>注意：在注册时要选择“小程序”；</p>
                  <img src="./images/an1_1.png">
                </div>
                <div>
                  <p>注册一个微信小程序帐号，填写账号基本信息，包含邮箱，密码。</p>
                  <img src="./images/an1_2.png">
                </div>
                <h3>2. 激活：</h3>
                <div>
                  <p>到邮箱激活注册账号。</p>
                  <img src="./images/an1_3.png">
                </div>
                <h3>3. 填写基本信息：</h3>
                <div>
                  <p>企业信息，主体信息，管理员信息。</p>
                  <img src="./images/an1_4.png">
                  <img src="./images/an1_5.png">
                </div>
                <div>
                  <p>注意：有对公账户的商户，建议选择【企业】，没有对公账户的商户建议选择【个体工商户】；该类型决定未来您的小程序能否开通微信支付的权限，且主体信息一旦注册无法修改，请慎重选择。</p>
                  <img src="./images/an1_6.png">
                  <img src="./images/an1_7.png">
                </div>
              </div>
              <div class="answer1" v-show="$route.params.step === '2'">
                <div>
                  <p>5月10日凌晨，微信终于开放了线下门店最让人期待的一项功能：附近的小程序。当微信用户走到某个地点，打开“发现-小程序-附近的小程序”，就能享受附近的小程序所提供的服务。而当不少微信用户欣喜于此项功能的推出，并跃跃欲试时，不熟悉线上运营的线下商家却犯难了：怎么申请小程序，并让门店出现在附近的小程序中呢？其实操作起来不难。</p>
                </div>
                <h3>第一步：注册小程序</h3>
                <div>
                  <p>在微信公众平台官网首页，选择“立即注册”，并填写邮箱、密码、主体信息。<span class="helpLink">点击查看注册教程</span></p>
                </div>
                <h3>第二步：制作小程序</h3>
                <div>
                  <p>登录拍掌柜后台（<span class="helpLink">https://pzg.com/</span>），上传商品、门店信息来制作您的专属小程序。并通过发布小程序的功能，将您的小程序账号授权给拍掌柜代理发布。</p>
                </div>
                <h3>第三步：开通“附近的小程序”</h3>
                <div>
                  <p>登录微信小程序后台（<span class="helpLink">https://mp.weixin.qq.com/</span>），进入“附近的小程序”开通功能后，需提供地点的经营资质信息。</p>
                  <img src="./images/an2_1.png">
                </div>
                <h3>第四步：给门店添加地点</h3>
                <div>
                  <p>通过审核，方能添加地点，一个小程序账号可以添加10个地点，都需要提供该地点的营业资质证明。添加地点审核通过后，用户即可在微信内找到你添加过地点的门店。</p>
                  <img src="./images/an2_2.png">
                </div>
              </div>
              <div class="answer1 anAct" v-show="$route.params.step === '3'">
                <div>
                  <p>微信是目前最主流的社交应用，每天有超过8亿人使用微信。而微信推出的小程序无疑是为线下商户开辟了一个获取线上新客的渠道。而小程序的开发、审核、上线，对于没有技术能力的商户来说就显得有些遥不可及了。而现在微信开放了第三方授权的方式，商户只需把注册的小程序账号授权给拍掌柜，就可以通过拍掌柜后台简单的配置实现自己的线上小程序商城，大大降低了使用门槛，那么具体如何授权呢？我们一起来学习下。</p>
                </div>
                <h3>第一步：登录拍掌柜网页版后台</h3>
                <div>
                  <p>在电脑浏览器上登录（<span class="helpLink">http://www.pzg.com</span>）拍掌柜商户后台。</p>
                  <img src="./images/an3_1.png">
                </div>
                <h3>第二步：制作专属小程序</h3>
                <div>
                  <p>在后台按照菜单逐个维护好商户小程序的基本信息、商品信息、以及门店信息。</p>
                  <img src="./images/an3_2.png">
                </div>
                <h3>第三步：发布小程序</h3>
                <div>
                  <p>制作好小程序之后，点击左侧菜单下方的【发布小程序】按钮，系统会弹出授权微信小程序账号的弹窗。</p>
                  <img src="./images/an3_3.png">
                  <p>若商户已经注册过小程序账号，则可以选择【已有账号，立即授权】，之后使用当时注册小程序的管理员微信号扫描系统提示的授权二维码，并点击确认授权即可。</p>
                  <img src="./images/an3_4.png">
                  <p>若商户此时尚未注册微信小程序账号，则可以点击【注册小程序账号】按钮，前往微信后台注册，注册成功后，回到拍掌柜后台继续完成授权即可。<span class="helpLink" @click="goRegister">点击查看注册教程</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="javascript/ecmascript6">
  export default{
    name: 'answercomponent',
    methods: {
      backToHelp () {
        this.$router.push({
          path: '/help'
        })
      },
      goRegister () {
        this.$router.push({
          path: '/help/answer/1'
        })
      }
    }
  }

</script>
<style type="text/css" scoped>
  .commonMain{
    flex: 1 1 0%;
    float: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: auto;
  }
  .coMain{
    height: 100%;
  }
  .coMain>div{
    background: #fff;
    border-right: 1px solid #F2F2F2;
    height: 100%;
    overflow: auto;
  }
  .coMainIn{
    padding: 50px 30px;
  }
  .coTitle{
    color: #333;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-bottom: 25px;
  }
  .headline{
    color: #8f8f8f;
    font-size: 16px;
  }
  .helpForm .helpTitle{
    font-size: 18px;
    color: #222;
    letter-spacing: 1px;
    line-height: 36px;
  }
  .helpLink{
    color: #298beb;
  }
  .helpForm .answer>div{
    min-width: 700px;
    max-width: 900px;
    line-height: 22px;
    font-size: 14px;
    color: #555;
    margin: 5px 0 10px;
  }
  .helpForm .answer>div h3{
    font-size: 16px;
    line-height: 28px;
    margin-top: 15px;
    color: #333;
  }
  .helpForm .answer>div img{
    width: 100%;
    margin-top: 3px;
    border: 1px solid #dedede;
  }
  .helpForm .answer>div.anAct{
    display: block;
  }
</style>